<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>信息录入</title>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/fromvalidation/dist/css/formValidation.css"/>
	<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/fromvalidation/default.css">
	<link rel="stylesheet" type="text/css" href="${APP_PATH}/static/bootstrap-3.3.7/plugins/datetimepicker/bootstrap-datetimepicker.min.css">
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
	<div class="container">
	        <div class="row">
	            <div class="col-sm-12">
	                <div class="page-header">
	                    <h4><font color="red">备注【${customer.customerName }】跟进信息</font></h4>
	                </div>
	                <div class="row">
						<div class="col-sm-2 col-sm-offset-10">
							<button class="btn btn-primary" id="remark_back_btn">返回</button>
							<button class="btn btn-primary" id="remark_add_modal_btn">新增</button>
						</div>
					</div>
					<!-- 显示表格数据 -->
					<div class="row"> 
						<div class="col-sm-12">
							<table class="table table-hover" id="cases_table">
								<thead>
									<tr>
										<th class="col-sm-3">联系时间</th>
										<th class="col-sm-9">交谈内容</th>
									</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
						</div>
					</div>
	            </div>
	        </div>
	</div>
	
	<!-- 备注信息添加的模态框 -->
<div class="modal fade" id="remarkAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加备注</h4>
      </div>
      <form class="form-horizontal" id="defaultForm" method="post" action="${APP_PATH}/caseremark/input">
      	  <input type="hidden" name="customerId" value="${customer.customerId }"/>
	      <div class="modal-body">
			  <div class="form-group">
			    <label class="col-sm-3 control-label">交谈内容</label>
			    <div class="col-sm-9">
			      <textarea rows="6" name="remark" class="form-control"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			  
	          <div class="form-group">
	                <label for="nextContactTime" class="col-sm-3 control-label">下次联系时间</label>
	                <div class="col-sm-9">
	                <div class="input-group date form_datetime" data-date="" data-date-format="yyyy-mm-dd hh:ii:ss" data-link-field="nextContactTime" data-link-format="yyyy-mm-dd hh:ii:ss">
	                    <input class="form-control" type="text" name="nextContactTime" value="" readonly>
						<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	                </div>
	                </div>
	            </div>
	      </div>
     
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="submit" class="btn btn-primary" id="emp_save_btn">保存</button>
	      </div>
       </form>
    </div>
  </div>
</div>

<!-- 员工修改的模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-="true">&times;</span></button>
        <h4 class="modal-title">员工修改</h4>
      </div>
      <form class="form-horizontal" id="saveForm" method="post" action="${APP_PATH}/caseremark/save">
	      <div class="modal-body">
	          <input type="hidden" name="rid" id="rid"/>
			  <div class="form-group">
			    <label class="col-sm-3 control-label">交谈内容</label>
			    <div class="col-sm-9">
			      <textarea rows="6" id="remark" name="remark" class="form-control"></textarea>
			      <span class="help-block"></span>
			    </div>
			  </div>
			
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="submit" class="btn btn-primary" id="emp_update_btn">更新</button>
	      </div>
      </form>
    </div>
  </div>
</div>
	<script type="text/javascript" src="${APP_PATH}/static/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/plugins/fromvalidation/dist/js/formValidation.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/plugins/fromvalidation/dist/js/framework/bootstrap.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/plugins/fromvalidation/zh_CN.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/plugins/datetimepicker/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7/plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	
    	$.ajax({
			url:"${APP_PATH}/caseremark/list",
			data:"customerId=${customer.customerId}",
			type:"GET",
			success:function(result){
				//1、解析并显示员工数据
				build_cases_table(result);
			}
		});
    	
    	function build_cases_table(result){
			//清空table表格
			$("#cases_table tbody").empty();
			var cases = result.extend.remarks;
			$.each(cases,function(index,item){
				
			
				var createTimeTd = $("<td></td>").append(item.createTime);
				var remarkTd = $("<td></td>").append(item.remark);
				
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
							  .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("修改");
				//为编辑按钮添加一个自定义的属性，来表示当前员工id
				editBtn.attr("edit-id",item.rid);

			
				var btnTd = $("<td></td>").append(editBtn);
				//var delBtn = 
				//append方法执行完成以后还是返回原来的元素
				$("<tr></tr>").append(createTimeTd)
					.append(remarkTd)
					.append(btnTd)
					.appendTo("#cases_table tbody");
			});
		}
    	
    	$(".form_datetime").datetimepicker({
            language:  'zh-CN',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left"
        });

    	
    	$('#defaultForm').formValidation({
            message: 'This value is not valid',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
            	remark: {
                    validators: {
                        notEmpty: {
                            message: '交谈内容不能为空'
                        }
                    }
                },nextContactTime:{
                    notEmpty: {
                        message: '下次时间不能为空'
                    }
                }
               
              
            }
        }).on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the FormValidation instance
            var bv = $form.data('formValidation');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
    			if(result.code == 200){
    				$("#remarkAddModal").modal('hide');
    				self.location="${APP_PATH}/caseremark/init/${customer.customerId }";
    			}
            }, 'json');
        }); 
    	
    	$('#saveForm').formValidation({
            message: 'This value is not valid',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
            	remark: {
                    validators: {
                        notEmpty: {
                            message: '交谈内容不能为空'
                        }
                    }
                }
            }
        }).on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the FormValidation instance
            var bv = $form.data('formValidation');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
    			if(result.code == 200){
    				$("#remarkAddModal").modal('hide');
    				self.location="${APP_PATH}/caseremark/init/${customer.customerId }";
    			}
            }, 'json');
        }); 
    	
	});
    
  //点击新增按钮弹出模态框。
	$("#remark_add_modal_btn").click(function(){
		//清除表单数据（表单完整重置（表单的数据，表单的样式））
		reset_form("#remarkAddModal form");
		//弹出模态框
		$("#remarkAddModal").modal({
			backdrop:"static"
		});
	});
  
	//返回
	$("#remark_back_btn").click(function(){
		self.location='${APP_PATH}/case/caselist.jsp?customerId=${customer.customerId}';
	});
  
	//清空表单样式及内容
	function reset_form(ele){
		$(ele)[0].reset();
		//清空表单样式
		$(ele).find("*").removeClass("has-error has-success");
		$(ele).find(".help-block").text("");
	}
	
	


	//1、我们是按钮创建之前就绑定了click，所以绑定不上。
	//1）、可以在创建按钮的时候绑定。    2）、绑定点击.live()
	//jquery新版没有live，使用on进行替代
	$(document).on("click",".edit_btn",function(){
		getRemark($(this).attr("edit-id"));
		
		//3、把员工的id传递给模态框的更新按钮
		$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
		$("#empUpdateModal").modal({
			backdrop:"static"
		});
	});
	function getRemark(rid){
		$.ajax({
			url:"${APP_PATH}/caseremark/getremark/"+rid,
			type:"GET",
			success:function(result){
				var remarks = result.extend.remarks;
				$("#remark").val(remarks.remark);
				$("#rid").val(remarks.rid);
			}
		});
	}
	</script>
</body>
</html>